<template>
    <div>
      <ConfigForm :styleList="styleList" />
    </div>
  </template>
  
  <script setup>
  import ConfigForm from './ConfigForm.vue';
  
  const styleList = [
            {
                label: "总计",
                checked: false,
                type: "sum",
                open: false,
                isShowSwitch: true,
                config: [
                    { label: "全部(求和)", flag: "sum", checked: false, type: "checkbox", value: "" },
                    { label: "提示", flag: "tip", type: "input", value: "总计" },
                    {
                        label: "数值", flag: "count", checked: false, type: "checkbox", value: "",
                        config: [
                            { label: "汇总方式", type: "select", value: "", options: [{ label: "求和", value: "sum" }, { label: "平均值", value: "avg" }, { label: "最大值", value: "max" }, { label: "最小值", value: "min" }] },
                            { label: "提示", type: "input", value: "总计" }
                        ]
                    },
                ]
            },
            {
                label: "辅助Y轴总计",
                checked: false,
                type: "assist",
                open: false,
                isShowSwitch: true,
                config: [
                    { label: "全部(求和)", checked: false, type: "checkbox", value: "" },
                    { label: "提示", type: "input", value: "总计" },
                    {
                        label: "数值", checked: false, type: "checkbox", value: "", config: [
                            {
                                label: "汇总方式", type: "select", value: "",
                                options: [{ label: "求和", value: "sum" }, { label: "平均值", value: "avg" }, { label: "最大值", value: "max" }, { label: "最小值", value: "min" }]
                            },
                            { label: "提示", type: "input", value: "总计" }]
                    },
                ]
            },
            {
                label: "图例",
                checked: false,
                type: "legend",
                open: false,
                isShowSwitch: true,
                config: [
                    { label: "位置", type: "tabs", value: "top", options: [{ label: "上侧", value: "top" }, { label: "下侧", value: "bottom" }, { label: "左侧", value: "left" }, { label: "右侧", value: "right" }] },
                ]
            },
            {
                label: "X轴",
                checked: false,
                type: "X-axis",
                open: false,
                isShowSwitch: true,
                config: [
                    {
                        label: "显示刻度标签", type: "checkbox",
                        options: [{ label: "自动倾斜X轴文字", type: "checkbox", value: "autoSlanting", icon: "icon-xia", checked: false }], value: ""
                    },
                    { label: "显示横轴滚动条", type: "checkbox", value: "showXScrollbar" },
                    { label: "显示标题", type: "checkbox", value: "showTitle", config: { type: "input", value: "数值" } }
                ]
            },
            {
                label: "Y轴",
                checked: false,
                open: false,
                isShowSwitch: true,
                type: "Y-axis",
                config: [
                    { label: "线条样式", type: "select", options: [{ label: "实线", value: "solidLine" }, { label: "虚线", value: "dashedLine" }] },
                    {
                        label: "显示标题", type: "checkbox", checked: false, value: "showTitle",
                        config: { type: "input", value: "数值" }
                    },
                    { label: "最小值", type: "input", value: "" },
                    { label: "最大值", type: "input", value: "" }
                ]
            },
            {
                label: "数据标签",
                checked: false,
                open: false,
                isShowSwitch: true,
                type: "dataLabel",
                config: [
                    { label: "显示数据", type: "checkbox", value: "" },
                    {
                        label: "显示百分比", type: "checkbox", value: "",
                        checked: false,
                        config: {
                            label: "保留小数",
                            configList: [
                                { type: "numberInput", value: "2" },
                                {
                                    type: "select",
                                    options: [
                                        { label: "四舍五入", value: "round" },
                                        { label: "向上取舍", value: "ceil" },
                                        { label: "向下取舍", value: "floor" }
                                    ],
                                    value: 'round'
                                },
                                {
                                    type: "checkbox",
                                    label: "省略末尾的0",
                                    icon: "icon-xia"
                                },
                            ]
                        }
                    },
                    { label: "隐藏重叠的标签文字", type: "checkbox", value: "" },
                ]
            },
            {
                label: "值",
                checked: false,
                open: false,
                isShowSwitch: false,
                type: "dataVal",
                config: [
                    {
                        label: "数值数量级", type: "select", value: "auto",
                        options: [
                            { label: "自动", value: "auto" },
                            { label: "无", value: "none" },
                            { label: "百分比", value: "whiteEnclosure" },
                            { label: "千分比", value: "thousandth" },
                            { label: "千", value: "thousand" },
                            { label: "万", value: "tenThousand" },
                            { label: "百万", value: "million" }
                        ]
                    },
                    {
                        label: "保留小数",
                        type: "text",
                        config: [
                            { type: "numberInput", value: "0" },
                            {
                                type: "select",
                                options: [
                                    { label: "四舍五入", value: "round" },
                                    { label: "向上取舍", value: "ceil" },
                                    { label: "向下取舍", value: "floor" }
                                ],
                                value: '四舍五入'
                            },
                            {
                                type: "checkbox",
                                label: "省略末尾的0",
                                icon: "icon-xia"
                            },
                        ]
                    },
                    {
                        label: "单位",
                        type: "selectInput",
                        options: [
                            { label: "后缀", value: "suffix" },
                            { label: "前缀", value: "prefix" }
                        ],
                        value: "suffix",
                        unitsVal: ""
                    },
                    {
                        label: "卡片内容",
                        type: "tabs",
                        options: [
                            { label: "原值", value: "original" },
                            { label: "显示单位", value: "showUnits" }
                        ],
                        value: "original",
                    }
                ]
            },
            {
                label: "数据过滤",
                type: "dataFilter",
                open: false,
                isShowSwitch: false,
                config: [
                    {
                        label: "显示X轴",
                        type: "selectInput",
                        options: [
                            { label: "前", value: "ago" }, { label: "后", value: "after" }
                        ],
                        value: "ago"
                    }
                ]
            },
            {
                label: "图形颜色",
                type: "color",
                open: false,
                isShowSwitch: false,
                config: [
                    {
                        type: "selectColor",
                        label: "经典配色",
                        options: [
                            {
                                label: "色板",
                                value: "palette",
                                colOptions: [
                                    { label: "适应主题", checked: false, colorList: ["rgba(255, 99, 132, 0.7)", "rgba(54, 162, 235, 0.7)", "rgba(255, 159, 64, 0.7)", "rgba(75, 192, 192, 0.7)", "rgba(153, 102, 255, 0.7)", "rgba(255, 159, 64, 0.7)", "rgba(255, 99, 132, 0.7)", "rgba(54, 162, 235, 0.7)"] },
                                    { label: "经典", checked: false, colorList: ["rgba(0, 0, 0, 0.8)", "rgba(255, 255, 255, 0.8)", "rgba(169, 169, 169, 0.8)", "rgba(128, 128, 128, 0.8)", "rgba(105, 105, 105, 0.8)", "rgba(211, 211, 211, 0.8)", "rgba(169, 169, 169, 0.8)", "rgba(255, 255, 255, 0.8)"] },
                                    { label: "色盲安全", checked: false, colorList: ["rgba(0, 0, 255, 0.8)", "rgba(255, 255, 0, 0.8)", "rgba(0, 128, 0, 0.8)", "rgba(255, 165, 0, 0.8)", "rgba(255, 0, 0, 0.8)", "rgba(128, 0, 128, 0.8)", "rgba(0, 255, 255, 0.8)", "rgba(255, 105, 180, 0.8)"] },
                                    { label: "文艺", checked: false, colorList: ["rgba(255, 182, 193, 0.7)", "rgba(176, 224, 230, 0.7)", "rgba(250, 240, 230, 0.7)", "rgba(255, 228, 225, 0.7)", "rgba(255, 239, 187, 0.7)", "rgba(255, 222, 173, 0.7)", "rgba(255, 182, 193, 0.7)", "rgba(255, 228, 225, 0.7)"] },
                                    { label: "高对比度", checked: false, colorList: ["rgba(0, 0, 0, 1)", "rgba(255, 255, 255, 1)", "rgba(255, 0, 0, 1)", "rgba(0, 255, 0, 1)", "rgba(0, 0, 255, 1)", "rgba(255, 255, 0, 1)", "rgba(0, 255, 255, 1)", "rgba(255, 0, 255, 1)"] },
                                    { label: "商务", checked: false, colorList: ["rgba(0, 0, 0, 0.9)", "rgba(255, 255, 255, 0.9)", "rgba(0, 102, 204, 0.9)", "rgba(153, 153, 153, 0.9)", "rgba(51, 51, 51, 0.9)", "rgba(0, 153, 204, 0.9)", "rgba(204, 204, 204, 0.9)", "rgba(0, 102, 204, 0.9)"] },
                                    { label: "创新", checked: false, colorList: ["rgba(255, 223, 0, 0.7)", "rgba(234, 57, 31, 0.7)", "rgba(77, 184, 255, 0.7)", "rgba(101, 227, 127, 0.7)", "rgba(255, 97, 169, 0.7)", "rgba(102, 51, 153, 0.7)", "rgba(0, 255, 128, 0.7)", "rgba(255, 187, 0, 0.7)"] },
                                    { label: "自然", checked: false, colorList: ["rgba(34, 139, 34, 0.8)", "rgba(139, 69, 19, 0.8)", "rgba(255, 99, 71, 0.8)", "rgba(0, 191, 255, 0.8)", "rgba(46, 139, 87, 0.8)", "rgba(255, 228, 196, 0.8)", "rgba(255, 99, 71, 0.8)", "rgba(0, 128, 0, 0.8)"] },
                                    { label: "潮汐", checked: false, colorList: ["rgba(72, 61, 139, 0.7)", "rgba(70, 130, 180, 0.7)", "rgba(47, 79, 79, 0.7)", "rgba(32, 178, 170, 0.7)", "rgba(70, 130, 180, 0.7)", "rgba(102, 205, 170, 0.7)", "rgba(72, 61, 139, 0.7)", "rgba(47, 79, 79, 0.7)"] },
                                    { label: "黄昏", checked: true, colorList: ["rgba(255, 99, 71, 0.8)", "rgba(255, 165, 0, 0.8)", "rgba(255, 69, 0, 0.8)", "rgba(204, 51, 51, 0.8)", "rgba(255, 87, 34, 0.8)", "rgba(255, 140, 0, 0.8)", "rgba(255, 99, 71, 0.8)", "rgba(139, 69, 19, 0.8)"] }
                                ]
                            },
                            {
                                label: "自定义",
                                value: "custom",
                                options: []
                            }
                        ],
                        value: 'palette'
                    }
                ]
            }
        ]
  </script>